import React, { ReactNode } from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import type { TableSettingProps } from '../TableSetting';

import styles from './index.less';
import TableSetting from '../TableSetting';

const renderActions = () => {
  return <div>actions</div>;
};

export type ToolbarProps = {
  // 表格标题
  title?: string | ReactNode;
  // 表格帮助信息
  tooltip?: string | ReactNode;
  // 工具栏右侧操作集合
  actions?: [];
  // 工具栏右侧设置区域
  settings?: TableSettingProps;
};

const ToolBar = (props: ToolbarProps) => {
  const ToolBarSettingProps = props.settings;

  return (
    <div className={styles.toolBar}>
      <div className={styles.title}>
        <span>表格标题</span>
        <Tooltip title="这是一个文字提示">
          <InfoCircleOutlined />
        </Tooltip>
      </div>
      <div>{renderActions()}</div>
      <div>
        <TableSetting {...ToolBarSettingProps} />
      </div>
    </div>
  );
};

export default ToolBar;
